import React, { Component } from "react";
import PropTypes from "prop-types";
import { Carousel } from "antd";

export default class HomeSwiper extends Component {
    constructor() {
        super();
        this.state = {
            swipers: [],
        };
    }
    static propTypes = {
        swipers: PropTypes.array,
    };
    static defaultProps = {
        swipers: [],
    };
    UNSAFE_componentWillMount() {
        this.setState({
            swipers: this.props.swipers,
        });
    }
    UNSAFE_componentWillReceiveProps(props) {
        this.setState({
            swipers: props.swipers,
        });
    }
    render() {
        const { swipers } = this.state;
        return (
            <div className="HomeSwiper mt-10">
                <Carousel autoplay={true}>
                    {swipers.map((item, index) => (
                        <div key={index}>
                            <div
                                className="swiperItem"
                                style={{ backgroundImage: `url('${process.env.REACT_APP_FILE}/${item.cover}')` }}
                            ></div>
                        </div>
                    ))}
                </Carousel>
            </div>
        );
    }
}